<template>
	<view class="container">
		<view class="input-container">
			<text class="title">兑换码</text>
			<input type="text" class="input" placeholder="请输入兑换码" focus="true" v-model="code" />
		</view>
		<view class="moveVerify" v-if="needVerify"><move-verify @result="verifyResult" ref="verifyElement"></move-verify></view>
		<button type="primary" class="btn" @tap="exchange">兑换</button>
	</view>
</template>

<script>
import moveVerify from '@/components/helang-moveVerify/helang-moveVerify.vue';
export default {
	components: { moveVerify },
	data() {
		return {
			code: '',
			tryCount: 0,
			verifyData: true
		};
	},
	onLoad() {
		// #ifdef H5
		this.$wechat.share({
			link: this.$handlerAppMessagePath()
		});
		// #endif
		// #ifdef MP-WEIXIN
		var launchOptions = wx.getLaunchOptionsSync();
		if (launchOptions && launchOptions.referrerInfo && launchOptions.referrerInfo.extraData && launchOptions.referrerInfo.extraData.yxylCode) {
			this.code = launchOptions.referrerInfo.extraData.yxylCode;
		}
		// #endif
	},
	computed: {
		needVerify() {
			return this.tryCount >= 3;
		}
	},
	onShareAppMessage(e) {
		return {
			path: this.$handlerAppMessagePath()
		};
	},
	methods: {
		exchange() {
			if (!this.code) {
				uni.showModal({
					title: '请输入激活码',
					showCancel: false
				});
			} else {
				if (this.verifyData) {
					var that = this;
					this.$http
						.request({
							url: 'api/UcenterApi/ExchangeCodeNew',
							method: 'POST',
							data:that.code							
						})
						.then(res => {
							uni.showModal({
								title: '激活成功',
								showCancel: false,
								success() {
									uni.switchTab({
										url: '../index/index'
									});
								}
							});
						})
						.catch(err => {
							that.tryCount++;
							if (that.needVerify) {
								that.verifyData = false;
								that.verifyReset();
							}
						});
				}
			}
		},
		/* 校验结果回调函数 */
		verifyResult(res) {
			this.verifyData = res;
		},
		/* 校验插件重置 */
		verifyReset() {
			if (this.$refs.verifyElement) {
				this.$refs.verifyElement.reset();

				/* 删除当前页面的数据 */
				this.verifyData = false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.moveVerify{
		position: relative;
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
	}
.input-container {
	
	.title {
		font-size: 35rpx;

		padding: 0 10px;
	}
	.input {
		font-size: 30rpx;
		flex-grow: 1;
		flex-shrink: 0;
	}
}
.btn {
	margin-top: 30px;
	background: #179b16;
}
</style>
